// App.tsx - 根组件文件
// 这是React应用的入口组件，负责整个应用的结构和主题管理

// 导入路由组件 - 用于处理页面导航
import { Router } from '@/router'
// 导入样式文件 - 应用的整体CSS样式
import './App.css'
// 导入状态管理 - 从Zustand store中获取设置状态
import { useSettingsStore } from '@/store'
// 导入React的useEffect Hook - 用于处理副作用操作（如DOM操作、事件监听）
import { useEffect } from 'react'

// 定义App函数组件 - React组件通常使用函数形式定义
function App() {
  // 使用Zustand store获取主题设置
  // useSettingsStore是一个自定义Hook，返回主题状态
  // 这里使用解构赋值获取theme值
  const { theme } = useSettingsStore()

  // useEffect Hook：在组件渲染后执行副作用操作
  // 第二个参数[theme]是依赖数组，当theme变化时重新执行effect
  useEffect(() => {
    // 获取HTML根元素，用于添加/移除dark类来控制暗色主题
    const html = document.documentElement
    // 创建媒体查询对象，检测系统是否偏好暗色主题
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
    
    // 定义更新主题的函数
    const updateTheme = () => {
      // 根据媒体查询结果确定系统主题
      const systemTheme = mediaQuery.matches ? 'dark' : 'light'
      
      // 根据当前主题设置更新HTML类名
      if (theme === 'auto') {
        // 自动模式：跟随系统主题
        // classList.toggle方法：如果第二个参数为true则添加类，否则移除
        html.classList.toggle('dark', systemTheme === 'dark')
      } else {
        // 手动模式：使用用户选择的主题
        html.classList.toggle('dark', theme === 'dark')
      }
    }

    // 初始设置主题 - 组件挂载时立即执行一次
    updateTheme()

    // 监听系统主题变化（仅在自动模式下）
    // 如果当前是自动模式，添加事件监听器
    if (theme === 'auto') {
      // 当系统主题变化时调用updateTheme函数
      mediaQuery.addEventListener('change', updateTheme)
    }

    // useEffect的清理函数：在组件卸载或依赖变化前执行
    // 这是为了防止内存泄漏，移除事件监听器
    return () => {
      if (theme === 'auto') {
        // 移除事件监听器
        mediaQuery.removeEventListener('change', updateTheme)
      }
    }
  }, [theme]) // 依赖数组：当theme值变化时重新执行effect

  // 组件渲染内容
  // 返回Router组件，这是React Router的路由配置
  // 在JSX中，组件以<ComponentName />形式使用
  return <Router />
}

// 导出App组件作为默认导出
// 这样其他文件可以通过import App from './App'来导入
export default App
